<template>
  <div class="#app">
    <el-form ref="form" :model="menuForm" label-width="70px">
      <div class="itemWrap">
        <div class="title size14">流程信息</div>
        <div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="流程ID">
                <span class="size12">{{flowId}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="流程名称">
                <span class="size12">{{flowName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="itemWrap">
        <div class="title size14">菜单应用</div>
        <div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="菜单名称">
                <el-select
                  @change="menuChange"
                  v-model="menuNameData"
                  filterable
                  size="mini"
                  placeholder="请选择"
                  :disabled="this.$route.query.type=='add' ? false : false"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="itemWrap">
        <div class="title size14">任务信息</div>
        <div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="任务ID">
                <span class="size12">{{taskId}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="分支编号" label-width="80px">
                <el-input v-model="branchNumData" style="width:60px;" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序编号">
                <el-input v-model="sortNumData" style="width:60px;" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <el-form-item label="任务办结通知" label-width="100px">
        <el-radio v-model="radio" label="0">是</el-radio>
        <el-radio v-model="radio" label="1">否</el-radio>
      </el-form-item>
      <el-form-item label="事项环节">
        <el-select @change="itemChange" v-model="itemValue" placeholder="请选择" size="mini">
          <el-option
            v-for="item in itemSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="流转方式">
        <el-radio v-model="radio1" label="0">自动分派</el-radio>
        <el-radio v-model="radio1" label="1">手动签领</el-radio>
      </el-form-item>
      <el-row :gutter="10" class="buttomRow">
        <el-col style="width:120px">
          <el-checkbox v-model="menuForm.checked" @change="timeChange" class="size12">任务办理时限:</el-checkbox>
        </el-col>
        <el-col :span="6">
          <el-input :disabled="configDisabled" size="mini" v-model="menuForm.timeLimit"></el-input>
        </el-col>
        <el-col :span="10">
          <el-select
            :disabled="configDisabled"
            size="mini"
            v-model="menuForm.timeLimitType"
            placeholder="请选择"
          >
            <el-option label="工作日" value="0"></el-option>
            <el-option label="小时" value="1"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-form-item label="风险防控">
          <el-input type="textarea" :rows="3" v-model="menuForm.riskControlNotice"></el-input>
        </el-form-item>
      </el-row>

      <el-form-item>
        <!-- <el-button size="mini" type="primary" @click="onSubmit">{{isAdd}}</el-button> -->
        <!-- <el-button size="mini">取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import LoginVue from "../../views/Login.vue";
export default {
  inject: ["reload"],
  props: {
    flowId: {
      type: String,
      default: ""
    },
    nodeId: Number | String,
    timeLimitDate: {
      type: String,
      default: ""
    },
    proceedingProcedefId: {
      type: String,
      default: ""
    },
    time_limit_typeData: {
      type: String,
      default: ""
    },
    isClick: {
      type: Boolean,
      default: false
    },
    bottomForm: {
      type: Object
    },
    flowName: {
      type: String,
      default: ""
    },
    taskId: {
      type: String,
      default: ""
    },
    taskName: {
      type: String,
      default: ""
    },
    isTask: String | Number,
    menuName: {
      type: String,
      default: ""
    },
    itemImg: {
      type: String,
      default: ""
    },
    itemName: {
      type: String | Number,
      default: ""
    },
    dataPic: String,
    proceed: String,
    menuId: Number | String,
    branchNum: String,
    sortNum: String,
    alias: String,
    proceedingRoundDate: String,
    circulationMode: String,
    InsuranceName: String,
    riskControlNoticeData: String
  },
  data() {
    return {
      itemSelect: [
        {
          label: "收件",
          value: "1"
        },
        {
          label: "受理",
          value: "2"
        },
        {
          label: "审核",
          value: "3"
        },
        {
          label: "办结",
          value: "4"
        },
        {
          label: "送达",
          value: "5"
        }
      ],
      configDisabled: true,
      radio: String(this.isTask),
      radio1: String(this.circulationMode),
      proceedingRound: "",
      menuIdInfo: this.menuId,
      menuForm: {
        timeLimit: "",
        timeLimitType: "",
        riskControlNotice: "",
        checked: ""
      },
      options: [],
      versionNumber: this.$route.query.versionNumber || "",
      itemValue: this.proceedingRoundDate,
      itemNameData: this.itemName,
      sortNumData: this.sortNum,
      branchNumData: this.branchNum,
      aliasData: this.alias,
      menuNameData: this.menuName
    };
  },
  watch: {
    isClick(val) {
      if (val) {
        this.onSubmit();
      }
    },
    riskControlNoticeData(val) {
      // console.log(val);

      return (this.menuForm.riskControlNotice = val);
    },
    nodeId(val) {
      return val;
    },
    isTask: {
      immediate: true,
      handler(val) {
        this.radio = val;
      }
    },
    proceedingProcedefId(val) {
      return val;
    },
    time_limit_typeData(val) {
      this.menuForm.timeLimitType = val;
    },
    timeLimitDate(val) {
      console.log("val", val);
      if (val) {
        this.menuForm.checked = true;
        this.configDisabled = false;
      } else {
        this.menuForm.checked = false;
        this.configDisabled = true;
      }
      this.menuForm.timeLimit = val;
    },
    bottomForm: {
      immediate: true,
      deep: true,
      handler(val) {
        return val;
      }
    },
    itemName: {
      immediate: true,
      handler(val) {
        this.itemNameData = val;
      }
    },
    circulationMode: {
      immediate: true,
      handler(val) {
        this.radio1 = val;
      }
    },
    sortNum: {
      immediate: true,
      handler(val) {
        this.sortNumData = val;
      }
    },
    branchNum: {
      immediate: true,
      handler(val) {
        this.branchNumData = val;
      }
    },
    alias: {
      immediate: true,
      handler(val) {
        this.aliasData = val;
      }
    },
    proceedingRoundDate: {
      immediate: true,
      handler(val) {
        this.itemValue = val;
      }
    },
    menuName: {
      immediate: true,
      handler(val) {
        this.menuNameData = val;
      }
    }
  },
  mounted() {
    this.$post("/menu/list", {
      pageNum: 1,
      pageSize: 1000,
      proceedingId: this.$route.query.itemId
    }).then(data => {
      this.options = data.result.dataList;
    });
  },
  computed: {
    isAdd() {
      return this.$route.query.type == "edit" ? "保存" : "立即创建";
    },
    itemId() {
      return this.$route.query.itemId;
    }
  },
  methods: {
    timeChange(val) {
      if (this.bottomForm.checked) {
        this.$message.error("当前事项已设置事项办理时限，请取消后再尝试设置");
        this.menuForm.checked = false;
      }
      if (this.menuForm.checked) {
        this.configDisabled = false;
      } else {
        this.configDisabled = true;
        this.menuForm.timeLimit = "";
        this.menuForm.timeLimitType = "";
      }
      this.$emit("checkedTrue", this.menuForm.checked);
    },
    itemChange(value) {
      for (let i of this.itemSelect) {
        if (i.value == value) {
          this.proceedingRound = i.label;
        }
      }
    },
    menuChange(value) {
      for (let i of this.options) {
        if (i.id == value) {
          this.menuIdInfo = value;
          this.menuNameData = i.name;
        }
      }
    },
    onSubmit() {
      this.$emit("isClick", false);
      if (this.$route.query.type == "edit") {
        if (this.menuNameData == "") {
          this.$message({
            type: "error",
            message: "菜单名称不能为空"
          });
          return;
        }
      }
      if (this.itemNameData == "") {
        this.$message({
          type: "error",
          message: "事项名称不能为空"
        });
        return;
      }
      if (this.itemValue == "") {
        this.$message({
          type: "error",
          message: "事项环节不能为空"
        });
        return;
      }
      if (!this.taskId) {
        this.$message({
          type: "error",
          message: "请先选择左侧任务"
        });
        return;
      }

      this.$post("/taskMenu/save", {
        branchNumber: this.branchNumData,
        circulationMode: this.radio1,
        id: this.nodeId,
        menuId: this.menuIdInfo,
        proceedingProcedefId:
          this.proceedingProcedefId || this.$route.query.proceedingProcedefId,
        menuName: this.menuNameData,
        procedefId: this.flowId,
        proceedingId: this.$route.query.itemId
          ? this.$route.query.itemId
          : this.itemNameData,
        // proceedingProcedefId
        proceedingRound: this.proceedingRound
          ? this.proceedingRound
          : this.proceed,
        proceedingRoundCode: this.itemValue,
        riskControlNotice: this.menuForm.riskControlNotice,

        sortNumber: this.sortNumData,
        taskFinalNotice: this.radio,
        taskId: this.taskId ? this.taskId : null,
        taskName: this.taskName,
        timeLimit: this.menuForm.timeLimit,
        timeLimitType: this.menuForm.timeLimitType,
        versionNumber: this.versionNumber
        // diagramResourceName: this.dataPic,
      }).then(data => {
        if (data.success) {
          this.$router.push({
            query: merge(this.$route.query, {
              versionNumber: data.result.versionNumber,
              proceedingProcedefId: data.result.id
            })
          });
          // this.menuForm.riskControlNotice
          this.versionNumber = data.result.versionNumber;
          console.log(this.versionNumber);

          this.$emit("isClickTrue", data.result);
        }
        this.$mess(data);
      });
      // })
      // .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "已取消"
      //   });
      // });
    }
  }
};
</script>

<style scoped lang="css">
/deep/ .el-form-item__label {
  font-size: 12px;
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
.item {
  display: flex;
}
.size12 /deep/ .el-checkbox__label {
  font-size: 12px;
}
.size12 {
  font-size: 12px;
}
.size14 {
  font-size: 14px;
}
.buttomRow {
  display: flex;
  align-items: center;
}
</style>
